<script setup>
import { User, Calendar, Wallet,OfficeBuilding,School,Postcard ,PriceTag, Plus } from '@element-plus/icons-vue'
import Visitor from '../../hospital/register/modules/Visitor.vue'
import { computed,onMounted, ref } from 'vue'
import { getPatientAPI, addPatientAPI } from '@/api/user.js'
import { useRoute, useRouter } from 'vue-router'

// 页面路有对象
const route = useRoute()

// 全局路由对象
const router = useRouter()

// 确认挂号按钮状态
const isDisabled = ref(true)

// 就诊人数就员信息
const patientList = ref([])

// 获取就诊人信息
const getPatient = async () => {
    const res = await getPatientAPI();
    patientList.value = res.data
}

// 初始化调用
onMounted(() => {
    getPatient()
})

// 添加就诊人
const addPatient = () => {
    router.push({
        path: '/user/patient-add',
        query: {
            fullPath: route.fullPath
        }
    })
}

// 更新界面
const update = () => {
    getPatient()
    console.log('dadad');
}



</script>
<template>
    <div class="container">
        <h1 class="tip">确认挂号信息</h1>
        <el-card >
            <template #header>
            <div class="card-header">
                <span>请选择就诊人</span>
                <el-button  type="primary" :icon="Plus" size="default" style="margin-right: 20px;" @click="addPatient ">添加就诊人</el-button>
            </div>
            </template>
            <div class="user">
                <Visitor @update="update"  class="item " v-for="item in patientList" :key="item.id" :data="item" :isDelete="true"></Visitor>
            </div>
            
        </el-card>

    </div>
</template>



<style lang="scss" scoped>
.container {
    
    width: 1000px;
    .tip {
        font-weight: 900;
        color: #7f7f7f;
        font-size: 20px;
    }
    .el-card {
        width: 100%;
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            
           
            .item {
                width: 30%;
                margin: 18px 14px;
                border-radius: 10px;
                transition: all .2s;
                cursor: pointer;
                position: relative;
                &::after {
                    content: '已选择';
                    width: 200px;
                    height: 200px;
                    position: absolute;
                    // background-color: red;
                    border-radius: 50%;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%) rotate(35deg);
                    color: red;
                    font-size: 30px;
                    border: 1px dashed red;
                    text-align: center;
                    line-height: 200px;
                    opacity: 0;
                    font-weight: 700;
                }
                &.active {
                    
                border: 1px solid rgb( 55,153,255);
                transform: scale(1.05);
                &::after {
                    opacity: 0.3;
                }
               

                }

            }
            
        }
    }
    .footer {
        margin-top: 20px;
        .card-header {
            padding: 10px 0;
            font-size: 20px;
        }
    }
    .button {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 40px;
        .el-button {
            width: 200px;
            height: 45px;
        }
    }
}
</style>